"use client";

import {
  ActionIcon,
  Group,
  Drawer,
  Text,
  Badge,
  Paper,
  Tooltip,
  rem,
  Stack,
  Button,
} from "@mantine/core";
import {
  IconPlayerRecordFilled,
  IconPlayerRecord,
  IconGauge,
  IconLink,
  IconNumber,
  IconInfoOctagon,
} from "@tabler/icons-react";
import {useDisclosure} from "@mantine/hooks";
import classes from "./NodePort.module.css";

export interface NodePortProps {
  sn: number;
  id: string;
  rate: string;
  state: string;
  module: string;
  peer: string;
  category: string;
}

export const NodePort = ({port}: {port: NodePortProps}) => {
  const [opened, {open, close}] = useDisclosure(false); // Draw组件专用

  const portState =
    port.state === "UP" ? (
      <Tooltip label="状态：UP">
        <ActionIcon variant="subtle" color="green.4">
          <IconPlayerRecordFilled style={{width: "70%", height: "70%"}} stroke={1.5} />
        </ActionIcon>
      </Tooltip>
    ) : (
      <Tooltip label="状态：DOWN">
        <ActionIcon variant="subtle" color="pink.4">
          <IconPlayerRecordFilled style={{width: "70%", height: "70%"}} stroke={1.5} />
        </ActionIcon>
      </Tooltip>
    );

  const opticalModule =
    port.module !== "" ? (
      <Badge
        size="xs"
        radius="sm"
        color="yellow.2"
        // gradient={{from: "yellow.4", to: "red.4", deg: 90}}
      >
        有光模块
      </Badge>
    ) : (
      <Badge size="xs" radius="sm" color="gray.4">
        无光模块
      </Badge>
    );

  return (
    <>
      <Paper withBorder p="xs" m={1}>
        <Group justify="space-between">
          {opticalModule}
          {portState}
        </Group>

        <Group gap={1}>
          <Tooltip label="端口速率" position="left">
            <IconGauge size="1.05rem" className={classes.icon} stroke={1} />
          </Tooltip>
          <Text size="xs">{port.rate}</Text>
        </Group>

        <Group gap={1}>
          <Tooltip label="连至对端" position="left">
            <IconLink size="1.05rem" className={classes.icon} stroke={1} />
          </Tooltip>

          <Text size="xs"> {port.peer}</Text>
        </Group>

        <Group justify="space-between">
          <Group gap={1}>
            <Tooltip label="端口ID" position="left">
              <IconNumber size="1.05rem" className={classes.icon} stroke={1} />
            </Tooltip>
            <Text size="xs" c="dimmed">
              {port.id}
            </Text>
          </Group>

          <Tooltip
            label="查看端口详情"
            position="bottom"
            transitionProps={{transition: "fade", duration: 300}}
          >
            <ActionIcon variant="subtle" color="violet" size="md" onClick={open}>
              <IconInfoOctagon style={{width: rem(16), height: rem(16)}} stroke={1.5} />
            </ActionIcon>
          </Tooltip>
        </Group>
      </Paper>
      <Drawer
        title={`端口ID为 ${port.id} 的详细信息`}
        offset={8}
        position="right"
        size="lg"
        radius="md"
        opened={opened}
        onClose={close}
      >
        <Stack>
          <Text>sn是{port.sn}</Text>
          <Text>id是{port.id}</Text>
          <Text>rate是{port.rate}</Text>
          <Text>state是{port.state}</Text>
          <Text>module是{port.module}</Text>
          <Text>peer是{port.peer}</Text>
          <Text>category是{port.category}</Text>
          <Text>等等，各种信息可以在这里丰富地呈现</Text>
          <Text c="red">特别注意，在当前数据结构下，只允许端口的修改，而不允许增删</Text>
          <Button>修改端口信息</Button>
        </Stack>
      </Drawer>
    </>
  );
};
